<template>
  <div class="app-container calendar-list-container" v-loading="vLoading">
    <el-form :model="q" ref="q" label-width="100px" class="el-form filter-container">
      <el-row>
        <el-col :span="8">
          <el-form-item label="用户名" prop="userName">
            <el-input placeholder="用户名" v-model="q.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-input placeholder="姓名" v-model="q.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电子邮箱" prop="emailAddress">
            <el-input placeholder="电子邮箱" v-model="q.emailAddress"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input placeholder="手机号" v-model="q.phoneNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号" prop="identityCard">
            <el-input placeholder="身份证号" v-model="q.identityCard"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="cx-btnbox">
          <el-button round class="r" type="success" @click="dialogFormVisible=true" v-if="isAdminList">添加管理员</el-button>
          <el-button round class="r" type="success" @click="dialogFormVisible=true" v-if="!isAdminList && isAdminRole">添加启盘用户</el-button>
          <el-button round class="r" type="primary" @click="resrtFrom ">重置</el-button>
          <el-button round class="r" type="primary" @click="getList">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="list" border fit highlight-current-row style="width: 100%" class="body-w">
      <el-table-column label="用户名" prop="userName"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="电子邮箱" prop="emailAddress"></el-table-column>
      <el-table-column label="手机号" prop="phoneNumber" width="110px"></el-table-column>
      <el-table-column label="身份证号" prop="identityCard" width="165px"></el-table-column>
      <el-table-column label="可用余额" prop="availableBalance" v-if="!isAdminList"></el-table-column>
      <el-table-column label="联系地址" prop="address"></el-table-column>
      <el-table-column label="注册时间" prop="creationTime" align="center" width="160px">
        <template slot-scope="scope">
          <span>{{scope.row.creationTime | moment}}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册类型" prop="registerType" v-if="!isAdminList && isAdminRole" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.registerType === 0">平台开户</el-tag>
          <el-tag v-else type="success">推荐注册</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="480px" v-if="!isAdminList && isAdminRole">
        <template slot-scope="scope">
          <el-button round type="primary" @click="handleRecharge(scope.row)" size="mini">会员充值</el-button>
          <el-button round type="primary" @click="handleResetPass(scope.row)" size="mini">重置密码</el-button>
          <el-button round type="text" @click="handleDetail(scope.row)" size="mini">收支明细</el-button>
          <el-button round type="text" @click="handleBaseUserInfo(scope.row)" size="mini">修改信息</el-button>
          <el-button round type="text" @click="handleActiveUser(scope.row)" size="mini">{{ scope.row.isActive ? '锁定':'启用' }}用户</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container" style="margin-right:20px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="q.startPage" :page-sizes="[10,20,30, 50]" :page-size="q.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <edit-user :accountType="accountType" @createSuccessed="createSuccessed"></edit-user>
    </el-dialog>
    <el-dialog title="用户信息" :visible.sync="dialogBaseUserInfoVisible">
      <base-user-info :userId="baseUserId" @updateSuccessed="updateSuccessed"></base-user-info>
    </el-dialog>
    <el-dialog title="用户收入明细" :visible.sync="dialogFinancialVisible">
      <user-financial-list :userId="financialUserId"></user-financial-list>
    </el-dialog>
    <el-dialog title="会员充值" :visible.sync="dialogRechargeVisible">
      <recharge :userId="rechargeUserId" @rechargeSuccessed="rechargeSuccessed"></recharge>
    </el-dialog>
  </div>
</template>
<script>
import { GetPageList, ResttPassword, ChangeUserActiveState } from '@/api/user'
import editUser from './editUser'
import userFinancialList from '../userFinancialList'
import recharge from './recharge'
import baseUserInfo from './baseUserInfo'

export default {
  name: 'userListComponent',
  components: {
    editUser,
    userFinancialList,
    recharge,
    baseUserInfo
  },
  props: {
    isAdminList: {
      type: Boolean,
      default: false
    },
    isAdminRole: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      accountType: 1,
      vLoading: false,
      dialogFormVisible: false,
      dialogFinancialVisible: false,
      dialogRechargeVisible: false,
      dialogBaseUserInfoVisible: false,
      financialUserId: 0,
      rechargeUserId: 0,
      baseUserId: 0,
      total: 0,
      q: {
        sorting: '',
        startPage: 1,
        pageCount: 30,
        userName: '',
        name: '',
        emailAddress: '',
        phoneNumber: '',
        identityCard: '',
        address: '',
        accountType: 1
      }
    }
  },
  watch: {
    $route: function(to, from) {
      this.reload()
    }
  },
  created() {
    this.reload()
  },
  methods: {
    reload() {
      this.accountType = 1
      this.q.accountType = 1
      if (this.isAdminList) {
        this.accountType = 0
        this.q.accountType = 0
      }
      this.getList()
    },
    resrtFrom() {
      this.$refs['q'].resetFields()
    },
    getList() {
      var _this = this
      _this.vLoading = true
      GetPageList(_this.q).then(result => {
        _this.list = result.data.items
        _this.total = result.data.totalCount
        _this.vLoading = false
      })
    },
    handleSizeChange(val) {
      this.q.pageCount = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.q.startPage = val
      this.getList()
    },
    createSuccessed() {
      this.dialogFormVisible = false
      this.getList()
    },
    updateSuccessed() {
      this.dialogBaseUserInfoVisible = false
      this.getList()
    },
    handleRecharge(row) {
      this.rechargeUserId = row.id
      this.dialogRechargeVisible = true
    },
    rechargeSuccessed() {
      this.dialogRechargeVisible = false
      this.getList()
    },
    handleDetail(row) {
      this.financialUserId = row.id
      this.dialogFinancialVisible = true
    },
    handleBaseUserInfo(row) {
      if (row.id !== this.baseUserId) {
        this.baseUserId = row.id
        this.dialogBaseUserInfoVisible = true
      }
    },
    handleActiveUser(row) {
      var _this = this
      var dto = {
        userId: row.id,
        isActive: !row.isActive
      }
      ChangeUserActiveState(dto).then(resp => {
        _this.getList()
      })
    },
    handleResetPass(row) {
      var _this = this
      _this.$confirm('确认将密码重置为【123456】?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        _this.loading = true
        ResttPassword({ id: row.id }).then(result => {
          _this.loading = false
          _this.$message.success('重置成功！')
        })
      })
    }
  }
}
</script>
